<template>
  <div :style="'height:' + height">
    <iframe id="warmChart" :src="url" style="width: 100%; height: 100%" />
  </div>
</template>

<script setup>
  import {
    ref,
    watch,
    onMounted
  } from 'vue';
  import {
    getToken
  } from "@/utils/auth";

  // 定义组件接收的props
  const props = defineProps({
    insId: {
      type: [String, Number],
      default: null
    }
  });

  // 响应式变量
  const height = ref('');
  const url = ref('');

  // 初始化高度并监听窗口大小变化
  onMounted(() => {
    // 初始化高度
    height.value = `${document.documentElement.clientHeight - 200}px`;

    // 监听窗口大小变化，动态调整高度
    const handleResize = () => {
      height.value = `${document.documentElement.clientHeight - 200}px`;
    };

    window.addEventListener('resize', handleResize);

    // 组件卸载时清理事件监听
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });

  // 监听insId变化，更新iframe的URL
  watch(
    () => props.insId,
    (newVal) => {
      if (newVal) {
        const baseUrl = `${import.meta.env.VITE_APP_BASE_API}/warm-flow-ui/index.html?id=${newVal}&type=FlowChart`;
        url.value = baseUrl + `&Authorization=Bearer ${getToken()}`;
        // 如需显示网格，可使用下面这行替换上面的url赋值
        // url.value = baseUrl + `&showGrid=true&Authorization=Bearer ${getToken()}`;
      }
    }, {
      immediate: true
    } // 立即执行一次
  );
</script>